<template>
    <div class="recommend">
        <div class="header">
            <span class="header-title">为你推荐</span>
            <span class="header-line"></span>
        </div>
        <div class="body">
          <div class="body-item body-item1">
              <p class="title">css样式之美</p>
              <p class="content">这是一篇推荐...</p>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="menu">
                  <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                  <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>
          <div class="body-item body-item2">
              <p class="title">前端布局响应式</p>
              <p class="content">我是一篇推荐...</p>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="menu">
                  <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                  <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>
          <div class="body-item body-item3">
              <p class="title">JavaScript写法</p>
              <p class="content">我是一篇推荐...</p>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="menu">
                  <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                  <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </div>
        </div>
    </div>
</template>

<script>



export default {
name: 'recommend',
components: {
},
props: {},
data () {
    return {}
},
methods: {}
}
</script>

<style lang="less" scoped>
.recommend {
  position: absolute;
  left: 58vw;
  top: 13vh;
  width: 19.7vw;
  height: 32.6vh;
  background-color: transparent;
  .header {
    border-block: none;
    height: 3vh;
    .header-title {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    color: rgba(13, 128, 120, 1);
    }
    /deep/ .header-line {
      display: inline-block;
      height: 0.2vh;
      width: 13vw;
      border-radius: 0.5px 0px, 0px, 0.5px;
      background: #d5eda1;
      /* margin-bottom: 0.5vh; */
      /* margin-left: 7px; */
      position: absolute;
      top: 1.2vh;
      left: 5.2vw;
    }
    }
  }
  .body {
    width: 18.8vw;
    height: 29.6vh;
    background-color: transparent;
    .body-item {
      width: 18.8vw;
      height: 8.4vh;
      box-sizing: border-box;
      // border-left: 0.5vw solid rgba(42, 130, 228, 1);
      border-radius: 5px;
      background-color: transparent;
      margin: 1vh 0vw;
      box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      position: relative;
      .title {
        display: block;
        position: absolute;
        left: 0;
        top: -0.5vh;
        margin-left: 2vw;
        height: 3vh;
        font-size: 18px;
        font-weight: 700;
        color: rgba(0, 186, 173, 1);
      }
      .content {
        display: block;
        position: absolute;
        left: 0vw;
        top: 3.5vh;
        margin-left: 2vw;
        width: 7.2vw;
        height: 1.7vh;
        font-size: 12px;
        font-weight: 400;
        color: rgba(120, 121, 147, 1);
      }
      .el-dropdown {
        position: absolute;
        right: 1.5vw;
        top: 5vh;
        transform: rotate(90deg);
      }
    }
    .body-item1 {
      border-left: 0.5vw solid rgba(42, 130, 228, 1);
    }
    .body-item2 {
      border-left: 0.5vw solid rgba(255, 195, 0, 1);
    }
    .body-item3 {
      border-left: 0.5vw solid rgba(45, 199, 109, 1);
    }
  }

</style>
